<script setup lang="ts">
  import {Todo} from "@/commons/todo";
  import {computed} from "vue";

  const props = defineProps<{todos: Todo[], checkAll: Function, clear: Function}>();

  const count = computed(() => {
    return props.todos?.reduce((pre, curr) => pre + (curr.isCompleted ? 1 : 0), 0)
  })

  const isCheckAll = computed({
    get() {
      return count.value > 0 && props.todos.length === count.value
    },
    set(value) {
      props.checkAll(value)
    }
  })

  const delAll = () => {
    if(confirm("是否清除已完成的任务?")) {
      props.clear()
    }
  }

</script>

<template>
  <div class="todo-footer">
    <label>
      <input type="checkbox" v-model="isCheckAll"/>
    </label>
    <span>
      <span>已完成{{count}}</span> / 全部{{todos.length}}
    </span>
    <button class="btn btn-danger" @click="delAll">清除已完成的任务</button>
  </div>
</template>

<style scoped>
.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}
.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}
.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}
.todo-footer button {
  float: right;
  margin-top: 5px;
}
</style>
